import { UserService } from "./../../providers/UserService";
import { BasePage } from "./../basePage";
import { Component, Injector } from "@angular/core";
import { IonicPage, NavController, NavParams } from "ionic-angular";
import { nailerService } from "../../providers/nailerService";
import { StorageService } from "../../providers/StorageService";
import { PIC_URL } from "./../../providers/Config";
import { ignoreElements } from "rxjs/operator/ignoreElements";
/**
 * Generated class for the NailerDetailPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: "page-nailer-detail",
  templateUrl: "nailer-detail.html"
})
export class NailerDetailPage extends BasePage {
  picture: any;
  is_zan: boolean;
  userinfo: any;
  user_id: any;
  /**关注参数 */
  focusNailerObj = {
    focused_id: "",
    user_id: ""
  };
  /**提示信息 */
  msg: string;
  data = [];
  /**点赞参数 */
  zankObj = {
    user_id: "",
    nail_id: ""
  };
  /**设计师信息 */
  nailerList = [];
  artist_id: any;
  artist_level = 0;
  GrayStart = 0;
  Mdstar = [];
  Gray = [];
  /*定义一个数组用来保存 当前美甲师的所有的作品*/
  artistProduct = [];
  /*定义一个数组来保存 当前要显示的美甲师的作品 */
  showArtistProduct = [];
  /*定义一个加载数据的初始值*/
  initialCount = 0;

  constructor(
    injector: Injector,
    public params: NavParams,
    public nailerservice: nailerService,
    public userService: UserService,
    public storage: StorageService
  ) {
    super(injector);
    this.picture = PIC_URL;
  }

  ionViewDidLoad() {
    if (this.params.get("list")) {
      this.nailerList = this.params.get("list");
    } else {
      this.nailerList = this.params.data;
    }

    console.log(this.params.data);
    /*获取美甲师 artist_id 的信息*/
    this.artist_id = this.nailerList["artist_id"];

    /*重新获取美甲师的信息*/

    this.userinfo = this.storage.read("userinfo");
    if (this.userinfo != null)
      this.zankObj.user_id = this.focusNailerObj.user_id = this.userinfo.user_id;

    this.user_id = this.zankObj.user_id;

    this.getArtistDetailsAPI();
  }
  ionViewWillEnter() {}
  dismiss() {
    let data = { foo: "bar" };
    this.viewCtrl.dismiss(data);
  }
  gotoBuyproduct(id) {
    // this.navCtrl.push("ImgInfoPage",{'id':id});
    let modal = this.modalCtrl.create("ImgInfoPage", { id: id });
    modal.onDidDismiss(data => {});
    modal.present();
  }

  /*获取当前美甲师的信息详情*/
  async getArtistDetailsAPI() {
    let param = {
      user_id: this.user_id,
      artist_id: this.artist_id
    };

    if (this.user_id == null) {
      this.msg = "登录后查看完整信息"
    } else {
      console.log(this.storage.read("userinfo"));
      if (param.artist_id == undefined) {
        let userArtist_id = this.params.data.nailerdetail.artist_id;
        param.artist_id = userArtist_id;
      }
      console.log(param);
      let res = await this.userService.getArtistDetailsAPI(param);
      this.nailerList = res.data;
      console.log(this.nailerList);
      this.artistProduct = this.nailerList["nails"];
      console.log(this.artistProduct.length);
      if(this.artistProduct.length!=0){
        this.artist_level = this.nailerList["artist_level"]-0;
      this.Mdstar=new Array(this.artist_level)
      this.Gray=new Array(5-this.artist_level)
      if (this.artistProduct.length < 7)
        this.showArtistProduct = this.artistProduct;
      else this.showArtistProduct = this.artistProduct.slice(0, 6);
      }else{
        this.msg = "当前美甲师没有发布美图"
        this.presentToast();
      }
      
    }
  }

  /*加载更多*/
  loadMore($event) {
    console.log($event);
    setTimeout(() => {
      this.initialCount++;

      var i = this.initialCount;
      this.showArtistProduct = this.artistProduct.slice(0, i * 6);

      $event.complete();

      if (this.artistProduct.length <= i * 6) {
        $event.enable(false);
        /*表示不能再加载*/
        console.log("数据加载完了");
      }
    }, 1000);
  }

  /**关注 */
  async getUserFocus(ids) {
    if (this.userinfo == null) {
      this.zankObj.user_id = this.focusNailerObj.user_id = null;
      this.showAlert("请登陆后进行如下操作");
      return;
    } else {
      this.zankObj.user_id = this.focusNailerObj.user_id = this.userinfo.user_id;
    }
    this.nailerList["is_focus"] = ids;
    this.focusNailerObj.focused_id = this.nailerList["artist_id"];
    console.log(this.focusNailerObj);
    let res = await this.nailerservice.getUserFocus(this.focusNailerObj);
    console.log(res);
    if (res.msg == "关注成功") {
      this.msg = "关注成功";
      this.presentToast();
      this.nailerList["focused_count"] =
        parseInt(this.nailerList["focused_count"]) + 1;
      this.getArtistDetailsAPI();
    } else if (res.msg == "取消关注成功") {
      this.msg = "取消关注成功";
      this.presentToast();
      this.nailerList["focused_count"] =
        parseInt(this.nailerList["focused_count"]) - 1;
      this.getArtistDetailsAPI();
    }
  }
  presentToast() {
    let toast = this.toastCtrl.create({
      message: this.msg,
      duration: 2000,
      position: "top"
    });
    toast.onDidDismiss(() => {
      console.log("Dismissed toast");
    });

    toast.present();
  }
  /**点赞 */
  async zank(imgid, i) {
    /* 用来保存美甲师的作品id  */
    console.log(imgid, i);
    console.log(this.showArtistProduct[i]);
    if (this.userinfo == null) {
      this.showAlert("请登陆后进行如下操作");
      return;
    }

    if (this.showArtistProduct[i].is_zank == 1) {
      this.showArtistProduct[i].is_zank = 0;
    } else {
      this.showArtistProduct[i].is_zank = 1;
    }

    this.zankObj.nail_id = imgid;
    let res = await this.nailerservice.zankNail(this.zankObj);
    console.log(res);
    this.getArtistDetailsAPI()
    if (res.reason) {
      this.msg = res.reason;
      this.presentToast();
    } else if (res.msg) {
      this.msg = res.msg;
      this.presentToast();
    }
    if (res.msg == "点赞成功") {

      // this.is_zan = true;
      console.log(this.is_zan);
    } else {
      // this.is_zan = false;
      console.log(this.is_zan);
    }
  }
}
